<template>
  <div id="globalHead">
    <div>
      <a-row
        class="grid-demo"
        align="center"
        style="margin-bottom: 16px"
        :wrap="false"
      >
        <a-col flex="auto">
          <div>
            <a-menu
              mode="horizontal"
              :default-selected-keys="['1']"
              @menu-item-click="jumpToRoute"
              v-model:selected-keys="selectedKeys"
            >
              <a-menu-item
                key="0"
                :style="{ padding: 0, marginRight: '38px' }"
                disabled
              >
                <div class="logoBox">LOGO</div>
              </a-menu-item>
              <a-menu-item v-for="r in menuList" :key="r.path"
                >{{ r.name }}
              </a-menu-item>
            </a-menu>
          </div>
        </a-col>
        <a-col flex="100px">
          <a-button
            v-if="userStore.loginUser.username === '未登录状态'"
            type="primary"
            @click="$router.push('/login')"
            >去登录
          </a-button>
          <div v-else>
            {{ userStore.loginUser.userRole }}
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import { routes } from "@/router/routes";
import { useRouter } from "vue-router";
import { computed, ref } from "vue";
import { useUserStore } from "@/store/UserStore";
import { checkAccess } from "@/access/checkAccess"; // onMounted(() => {});

// onMounted(() => {});

// 引入userStore
const userStore = useUserStore();

const router = useRouter();
let selectedKeys = ref(["/"]);

router.afterEach((to, from, failure) => {
  selectedKeys.value = [to.path];
});

// 筛选路由
let menuList = computed(() => {
  return routes.filter((r) => {
    if (
      r.meta?.show &&
      (!r.meta.access || (r.meta.access && checkAccess(r.meta.access)))
    ) {
      return true;
    }
    return false;
  });
});

/**
 * 跳转到指定的路由路径
 * @param {string} key 目标路由的路径名
 * @returns 无返回值
 */
let jumpToRoute = (key: string) => {
  // 使用Vue Router的router.push方法，将当前的浏览路径跳转到key指定的路径
  router.push({ path: key });
};
</script>
<style scoped></style>
